import { Suspense, lazy } from "react";
import { Link, Route, Routes } from "react-router-dom";

const Hello = lazy(() => import("./Hello"));
const About = lazy(() => import("./About"));

// 定义路由组件
function Home() {
  return (
    <>
      <Link to="/hello">Hello</Link>
      &nbsp;
      <Link to="/about">About</Link>
      <br />
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/hello" element={<Hello />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </>
  );
}

export default Home;
